<template>
  <div class="bc" v-bind:style="{'height':clientHeight + 'px'}">
    <div class="head">昵称 <span>{{nickname}}</span></div>
    <div class="pay-box">
      <div class="box-head">充值流量</div>
      <div class="express">(此次金额￥{{ num * flowPrice}})</div>
      <div class="input-money">
        <!--<span>￥</span>-->
        <input type="number" v-model="num" oninput="if(value.length>3)value=value.slice(0,3)">
        <span>G</span>
      </div>
      <!--<div class="type-choose">点击使用金额充值</div>-->
    </div>
    <div class="input-button blue" @click="pay">充值总流量</div>
    <router-link to="/home">
      <div class="input-button white">返回个人中心</div>
    </router-link>
  </div>
</template>

<script>
import {wxpay, WXCONFIG, USERINFO} from '../../api/request'
import { Toast } from 'vue-ydui/dist/lib.rem/dialog'
import wx from 'weixin-js-sdk'
export default {
  name: 'pay',
  data () {
    return {
      num: '',
      clientHeight: document.documentElement.clientHeight,
      nickname: '',
      flowPrice: 4
    }
  },
  created () {
    WXCONFIG().then(response => {
      if (response.data.code === 200) {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: 'wx1f4ed91c7207f884', // 必填，公众号的唯一标识.
          timestamp: response.data.data[0].timestamp, // 必填，生成签名的时间戳
          nonceStr: response.data.data[0].nonceStr, // 必填，生成签名的随机串
          signature: response.data.data[0].signature, // 必填，签名，见附录1
          jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
      }
    })
    this.nickname = this.$store.getters.name
    USERINFO(this.$store.getters.uid).then(
      res => {
        let respData = res.data
        if (respData.code === 200) {
          if (respData.data.authority === 1) {
            this.flowPrice = 0.01
          }
        }
      },
      error => {
        console.log(error)
      })
  },
  methods: {
    pay () {
      var that = this
      if (that.num > 0) {
        wxpay(that.$store.getters.uid, that.num * that.flowPrice, that.num).then(response => {
          if (response.data.code === 200) {
            let msg = JSON.parse(response.data.data)
            let appId = response.data.appId
            let PAYTimestamp = msg.PAYTimestamp
            let PAYnonceStr = msg.PAYnonceStr
            let prepayid = msg.prepay_id
            let sign = msg.sign
            wx.chooseWXPay({
              appId: appId,
              timestamp: PAYTimestamp,
              nonceStr: PAYnonceStr,
              package: prepayid,
              signType: 'MD5',
              paySign: sign,
              success: function () {
                Toast({mes: '支付成功', timeout: 1000})
                that.$router.push({path: '/store'})
              }
            })
          }
        })
      } else {
        Toast('金额不得小于0')
      }
    }
  }
}
</script>

<style scoped>
  .bc{
    background-color: #eff0f1;
    padding-top: 0.2rem;
  }
  .head{
    margin: 0 auto;
    width: 7.2rem;
    height: 0.92rem;
    line-height: 0.92rem;
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);
    font-size: 0.3rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  .head span{
    float: right;
    color: #b0adad;
  }

  .pay-box{
    margin: 1rem auto;
    width: 6.17rem;
    height: 2.94rem;
    border-radius: 0.14rem;
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);
    padding-top: 0.3rem;
    padding-left: 0.3rem;
    font-size: 0.3rem;
    color: #505050;
    background-color: #fff;
    position: relative;
  }
  .express{
    position: absolute;
    right: 0.1rem;
    top: 0.74rem;
    font-size: 0.24rem;
    letter-spacing: 1px;
    z-index: 9;
  }
  .input-money{
    position: absolute;
    width: 3.8rem;
    text-align: center;
    left: calc(50% - 1.9rem);
    bottom: 0.76rem;
    font-size: 0.6rem;
    border-bottom: solid 1px #b5b5b5;
    line-height: 1.3rem;
  }
  .input-money input{
    width: 2rem;
    height: 1.3rem;
    font-size: 0.82rem;
    color: #000;
    text-align: center;
  }
  .input-money span:first-child{
    position: absolute;
    left: 0;
  }
  .input-money span:last-child{
    position: absolute;
    right: 0;
  }
  .type-choose{
    font-size: 0.2rem;
    color: #0092f8;
    position: absolute;
    bottom: 0.15rem;
    left: 1.3rem;
  }
  .blue{
    margin-top: 1.6rem;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    background-color: #0092f8;
  }
  .white{
    background-color: #fff;
    color: #0092f8;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    margin-top: 0.28rem;
  }
</style>
